{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header">注册</div>
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label for="username" class="form-label">用户名（登录账号）</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                        <div class="form-text">用户名只能包含字母、数字和下划线</div>
                    </div>
                    <div class="mb-3">
                        <label for="real_name" class="form-label">真实姓名</label>
                        <input type="text" class="form-control" id="real_name" name="real_name" required>
                    </div>
                    <div class="mb-3">
                        <label for="phone" class="form-label">手机号码</label>
                        <input type="tel" class="form-control" id="phone" name="phone" pattern="[0-9]{11}" required>
                        <div class="form-text">请输入11位手机号码</div>
                    </div>
                    <div class="mb-3">
                        <label for="department" class="form-label">部门/年级组</label>
                        <select class="form-select" id="department" name="department" required>
                            <option value="">请选择部门/年级组</option>
                            <option value="一年级">一年级</option>
                            <option value="二年级">二年级</option>
                            <option value="三年级">三年级</option>
                            <option value="四年级">四年级</option>
                            <option value="五年级">五年级</option>
                            <option value="六年级">六年级</option>
                            <option value="教导处">教导处</option>
                            <option value="德育处">德育处</option>
                            <option value="总务处">总务处</option>
                            <option value="办公室">办公室</option>
                            <option value="其他">其他</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">密码</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                        <div class="form-text">密码长度至少6位，建议包含字母和数字</div>
                    </div>
                    <div class="mb-3">
                        <label for="confirm_password" class="form-label">确认密码</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                    </div>
                    <button type="submit" class="btn btn-primary">注册</button>
                    <a href="{{ url_for('login') }}" class="btn btn-link">返回登录</a>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 添加密码验证的JavaScript -->
<script>
    document.getElementById('confirm_password').addEventListener('input', function() {
        var password = document.getElementById('password').value;
        var confirm = this.value;
        if (password !== confirm) {
            this.setCustomValidity('两次输入的密码不一致');
        } else {
            this.setCustomValidity('');
        }
    });

    document.getElementById('password').addEventListener('input', function() {
        if (this.value.length < 6) {
            this.setCustomValidity('密码长度至少6位');
        } else {
            this.setCustomValidity('');
            // 重新验证确认密码
            var confirm = document.getElementById('confirm_password');
            if (confirm.value) {
                if (this.value !== confirm.value) {
                    confirm.setCustomValidity('两次输入的密码不一致');
                } else {
                    confirm.setCustomValidity('');
                }
            }
        }
    });
</script>
{% endblock %} 